<template>
  <div class="print">
    <div v-for=" (item, index) in drawQr" :key="item">
      <div :id="'qrcode'+index" style="margin:0 140px;padding-top:30px"></div>
      <div style="font-size:20px;margin-top:0px;text-align:center">{{ item }}</div>
    </div>
  </div>
</template>

<script>
import  QRcode  from "qrcodejs2"

export default {
  components: {
    // barcode: VueBarcode
  },
  props: {
    drawQr:{ type: Array, default: []},
  },
  created () {
    // this.paginator(this.delInfo)
  },
  mounted () {
    this.$nextTick(() => {
      this.qrcode();
    })
  },
  data () {
    return {}
  },
  methods: {
    qrcode(){
      this.drawQr.map((x, index )=> {
        document.getElementById(`qrcode${index}`).innerHTML = '';
        let qrcode = new QRcode(`qrcode${index}`,{
          width:180,
          height:155,
          text:x
        });
      });
    }
  },
  watch: {
    drawQr: {
      handler(newVal) {
        if(newVal) {
          this.$nextTick(() => {
            this.qrcode();
          })
        }
      }
    }
  }
}
</script>

<style scoped>

</style>
